<template>
	<view class="container bar">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view class="goods-section padding-top-xs">
			<!-- 商品列表 -->
			<view class="g-item">
				<image :src="data.paylog.setting.cover"></image>
				<view class="right">
					<text class="title clamp text-cut padding-bottom-xs">{{data.paylog.setting.title}}</text>
					<text class="spec">{{data.paylog.setting.summary}}</text>
					<view class="price-box">
						<text class="price text-red text-boldm">￥{{data.paylog.actual}}</text>
						<text class="number">x 1</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 优惠明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b" v-if="data.paylog.setting.coupon==0 || data.coupons.length==0">
				<view class="cell-icon">
					券
				</view>
				<text class="cell-tit clamp">优惠券</text>
				<text class="cell-tip" :class="data.coupons.length==0?'disabled':'active'">
					{{data.paylog.setting.coupon==0?'不支持优惠券':(data.coupons.length>0?'选择优惠券':'暂无可用优惠券')}}
				</text>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view>
			<view class="yt-list-cell b-b" @click="showmodal='coupon'" v-else>
				<view class="cell-icon">
					券
				</view>
				<text class="cell-tit clamp">优惠券</text>
				<text class="cell-tip active" v-if="data.coupon.id==0">
					{{data.coupons.length}}张优惠券可用
				</text>
				<text class="cell-tip active" v-else>
					{{data.coupon.name}}
				</text>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view>
			<view class="yt-list-cell b-b">
				<view class="cell-icon hb">
					折
				</view>
				<text class="cell-tit clamp">会员折扣</text>
				<text class="cell-tip disabled">{{data.discounttext}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<view class="cell-icon lpk">
					抵
				</view>
				<text class="cell-tit clamp">积分抵扣</text>
				<text class="cell-tip disabled" v-if="data.paylog.setting.deduct==0">不支持积分抵扣</text>
				<text class="cell-tip text-green" v-else>可用{{data.deductmax}}积分抵扣{{data.deductamount}}元</text>
			</view>
		</view>
		<form>
			<view class="cu-form-group margin-top" v-if="data.paylog.setting.deduct==1">
				<view class="title">使用{{data.deductmax}}积分抵扣{{data.deductamount}}元</view>
				<switch @change="dodeduct" :class="deduct?'checked':''" :checked="deduct?true:false"></switch>
			</view>
		</form>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip">￥{{data.paylog.actual}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">优惠金额</text>
				<text class="cell-tip red">-￥{{data.discountamout}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">还需支付</text>
				<text class="cell-tip red">￥{{data.paylog.amount}}</text>
			</view>
		</view>
		
		<view class="pay-type-list" v-if="platform!='h5'">
			<view class="type-item b-b" :class="data.payments.wxpay?'':'hide'" @click="payment='wxpay'">
				<image class="icon" src="@/static/images/icon/payment_wxpay.png"></image>
				<view class="con">
					<text class="tit">微信支付</text>
					<text>微信支付，安全便捷</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked="payment=='wxpay'" /></radio>
				</label>
			</view>
			<view class="type-item b-b" :class="data.payments.alipay?'':'hide'" @click="payment='alipay'">
				<image class="icon" src="@/static/images/icon/payment_alipay.png"></image>
				<view class="con">
					<text class="tit">支付宝支付</text>
					<text>支付宝，知托付</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked="payment=='alipay'" /></radio>
				</label>
			</view>
			<view class="type-item" :class="data.payments.balance?'':'hide'" @click="data.balance>=data.paylog.amount?payment='balance':false">
				<image class="icon" src="@/static/images/icon/payment_balance.png"></image>
				<view class="con">
					<text class="tit" :class="data.balance<data.paylog.amount?'text-gray':''">余额支付</text>
					<text>可用余额 ¥{{data.balance}}</text>
				</view>
				<label class="radio">
					<radio value="" :disabled="data.balance<data.paylog.amount?true:false" color="#fa436a" :checked="payment=='balance'" /></radio>
				</label>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar shop">
			<button class="action">
				<text class="text-orange text-xxl text-bold padding-left">￥{{data.paylog.amount}}</text>
			</button>
			<view v-if="platform=='wxapp' && data.needlogin" class="btn-group margin-bottom-sm">
				<button open-type="getUserInfo" @getuserinfo="WxappLogin" withCredentials="true" style="width: 80%;" class="cu-btn bg-gradual-green round-topleft-none shadow-blur lg">立即支付</button>
			</view>
			<view class="btn-group margin-bottom-sm" v-else>
				<button @click="doPay" style="width: 80%;" class="cu-btn bg-gradual-green round-topleft-none shadow-blur lg">立即支付</button>
			</view>
		</view>
		<view class="cu-modal bottom-modal" v-if="data.paylog.setting.coupon==1 && data.coupons.length>0" :class="showmodal=='coupon'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-yellow" @tap="docoupon(0)">不使用优惠券</view>
					<view class="action text-green" @tap="docoupon(couponid)">确定</view>
				</view>
				<view class="padding bg-gray">
					<view class="coupon-item" @click="couponid=item.id" :class="item.id==couponid?'selected':''" v-for="(item,index) in data.coupons" :key="index">
						<view class="con">
							<view class="left">
								<text class="title">{{item.name}}</text>
								<text class="time">有效期至{{item.expiredate}}</text>
							</view>
							<view class="right">
								<text class="discount" v-if="item.type==1">{{item.discount}}折</text>
								<text class="discount price" v-else>{{item.deduct}}</text>
								<text v-if="item.minamount>0">满{{item.minamount}}元可用</text>
							</view>
							<view class="circle l"></view>
							<view class="circle r"></view>
						</view>
						<text class="tips">{{item.remark || '点击选择优惠券'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	
	export default {
		data() {
			return {
				tid:'',
				payment:'',
				showmodal:'',
				deduct:0,
				platform:'',
				couponid:0,
				data:{
					"title" : "创建订单",
					"payments" : {
						"alipay":false,
						"wxpay":false,
						"balance":true
					},
					"paylog" : {
						"id": 0,
						"uniacid": 0,
						"uid": 0,
						"nickname": "",
						"module": "",
						"tid": "",
						"nid": "",
						"cid": 0,
						"amount": 0.00,
						"actual": 0.00,
						"deduct": 0,
						"discount": 0,
						"proportion": 0.00,
						"brokerage": 0.00,
						"commission": 0.00,
						"profit": 0.00,
						"setting": {
							"coupon": 0,
							"discount": 0,
							"deduct": 0,
							"deductmax": 0,
							"title": "",
							"cover": "",
							"summary": "",
							"specid": 0,
							"type": ""
						},
						"status": 0,
						"remark": "",
						"paytime": 0,
						"addtime": 0,
						"dateline": 0
					},
					"discounttext" : "",
					"discountamout" :0.00,
					"deductmax" :0,
					"deductamount" :0.00,
					"coupons" : [],
					"balance" :0.00,
					"coupon" : {
						"id":0,
						"name":""
					},
					"needlogin":false
				}
			}
		},
		onLoad(options) {
			if(typeof(options.tid)=='undefined' || options.tid=='') return core.toast('参数错误：订单号异常','back');
			this.tid = options.tid;
			this.platform = core.platform;
			this.initData('order/create',{tid:this.tid});
		},
		onPullDownRefresh(){
			var that = this;
			this.initData('order/create',{tid:this.tid});
			uni.stopPullDownRefresh();
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
						return core.report(res,true);
					}
					that.data = res;
					if(res.paylog.deduct>0){
						that.deduct=1;
					}
					that.couponid = res.paylog.cid;
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(that.platform!='h5'){
						uni.getProvider({
						    service: 'payment',
						    success: function (ret) {
						        if(ret.provider.length==0) return core.toast('暂无可用的支付方式');
								for(var p in ret.provider){
									if(that.payment=='' && res.payments[ret.provider[p]]) that.payment = ret.provider[p];
									if(res.payments[ret.provider[p]]) that.data.payments[ret.provider[p]] = true;
								}
						    }
						});
					}
					if(callback){
						callback(res);
					}
				},data);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			WxappBind(code){
				var that = this;
				uni.getUserInfo({
					provider: 'weixin',
					lang:'zh_CN',
					success: (infoRes) => {
						return core.post('member/bind',function(res){
							if(res.type!='success') return core.report(res);
							return that.doPay();
						},{provider:'wxapp','code':code,userinfo:infoRes.userInfo,appsecret:core.apitoken});
					},
					fail(e) {
						core.toast('登陆失败');
					}
				});
			},
			WxappLogin(){
				var that = this;
				return uni.login({
					provider: 'weixin',
					success: (res) => {
						that.WxappLogin(res.code);
					},
					fail: (err) => {
						core.toast('授权登录失败');
						console.error('授权登录失败：' + JSON.stringify(err));
					}
				});
			},
			docoupon(cid=0){
				this.showmodal = '';
				if(cid==this.data.paylog.cid) return this.couponid=cid,false;
				var that = this;
				return core.get('order/coupon',function(res){
					if(res.type!='success') return core.report(res);
					that.data = res.message;
					that.deduct = that.data.paylog.deduct>0 ? 1 : 0;
					that.couponid = that.data.paylog.cid;
				},{cid:cid,tid:this.data.paylog.tid})
			},
			dodeduct(e){
				var that = this;
				let deduct = e.detail.value;
				return core.get('order/deduct',function(res){
					if(res.type!='success') return core.report(res);
					that.data = res.message;
					that.deduct = that.data.paylog.deduct>0 ? 1 : 0;
					that.couponid = that.data.paylog.cid;
				},{deduct:deduct,tid:this.data.paylog.tid});
			},
			doPay(){
				if(core.platform=='h5'){
					let paymenturl = core.url('','pay') + '&tid='+this.tid+'&authkey='+core.userinfo.token;
					paymenturl = paymenturl.replace('swaapi.php','index.php')
					window.location.href = paymenturl;
				}else{
					if(this.payment=='') return core.toast('请选择支付方式');
					if(this.payment=='balance'){
						if(this.data.balance<this.data.paylog.amount) return core.toast('您的余额不足');
						let that = this;
						core.post('order/pay',function(res){
							if(res.type!='success') return core.report(res);
							let redirect = res.redirect=='' ? that.data.paylog.setting.redirect : res.redirect;
							core.toast(res.message,redirect,'success');
						},{tid:this.data.paylog.tid,payment:'balance'});
					}else{
						if(!this.data.payments[this.payment]) return core.toast('暂不支持此支付方式');
						var that = this;
						return core.post('order/submit',function(res){
							if(res.type!='success') return core.report(res);
							let payload = {
								provider : that.payment,
								orderInfo : res.message.orderinfo,
								success : function(ret){
									return core.get('order/payquery',function(rep){
										if(rep.type!='success') return core.report(rep),console.log(rep);
										core.toast('支付成功',that.data.paylog.setting.redirect,'success');
									},{tid:that.data.paylog.tid},'json',true);
								},
								fail : function(err){
									core.toast('支付失败，请重试');
									console.log('fail:' + JSON.stringify(err));
								}
							}
							if(that.platform=='wxapp'){
								payload.timeStamp = String(res.message.timestamp);
								payload.signType = 'MD5';
								payload.nonceStr = res.message.noncestr;
								payload.package = res.message.package;
								payload.paySign = res.message.paysign;
							}else if(that.platform=='ttapp'){
								payload.service = that.payment=='alipay' ? 4 : 3;
							}
							return uni.requestPayment(payload);
						},{tid:this.data.paylog.tid,platform:this.platform,payment:this.payment});
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;
	
		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}
	
		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}
	
		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}
	
		.g-item {
			display: flex;
			margin: 20upx 30upx;
	
			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}
	
			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}
	
			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}
	
			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}
	
			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 10upx;
	
				.price {
					margin-bottom: 4upx;
				}
				.number{
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}
	
			.step-box {
				position: relative;
			}
		}
	}
	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}
	
	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;
	
		&.cell-hover {
			background: #fafafa;
		}
	
		&.b-b:after {
			left: 30upx;
		}
	
		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;
	
			&.hb {
				background: #ffaa0e;
			}
	
			&.lpk {
				background: #3ab54a;
			}
	
		}
	
		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}
	
		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $font-color-light;
			margin-right: 10upx;
		}
	
		.cell-tip {
			font-size: 26upx;
	
			&.disabled {
				color: $font-color-light;
			}
	
			&.active {
				color: $base-color;
			}
			&.red{
				color: $base-color;
			}
		}
	
		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}
	
		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}
	
	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 40upx;
		
		.type-item{
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 30upx;
			font-size: 30upx;
			position:relative;
		}
		
		.icon{
			width: 100upx;
			height: 100upx;
			margin-right: 10upx;
			font-size: 52upx;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}
		.tit.text-gray{color: #aaaaaa;}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
	
	/* 优惠券列表 */
	.coupon-item{
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;
		.con{
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;
			&:after{
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}
		.title{
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}
		.time{
			font-size: 24upx;
			color: $font-color-light;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}
		.discount{
			font-size: 44upx;
			color: $base-color;
		}
		.price::before{
			content: '￥';
			font-size: 34upx;
		}
		.tips{
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}
		.circle{
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;
			&.r{
				left: auto;
				right: -6upx;
			}
		}
	}
	.coupon-item.selected{
		background-image: linear-gradient(45deg, #ff9700, #ed1c24);
		*{
			color: #FFFFFF !important;
		}
	}
</style>
